<!--
 * @Author: your name
 * @Date: 2020-08-14 09:36:10
 * @LastEditTime: 2020-09-23 16:29:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \devopsh:\project\QMangolia-web\src\nav\index.vue
-->
<template>
  <div class="q-devops">
    <div class="q-devops-nav">
      <div>
        <nav-left />
        <el-menu
          :default-active="activeMenuIndex"
          class="q-menu"
          mode="horizontal"
          @select="handleMenuSelect"
          background-color="#001529"
          text-color="#999999"
          router
          active-text-color="#ffffff">
          <el-menu-item
            v-for="(item, index) in menus"
            :key="index"
            :index="item.path">{{ item.meta && item.meta.title || '' }}</el-menu-item>
        </el-menu>
        <nav-right />
      </div>
      <ul
        role="menubar"
        class="q-submenu el-menu--horizontal el-menu"
      >
        <li
          role="menuitem"
          class="el-menu-item"
          :class="{'is-active': item.path === activeSubmenuIndex}"
          v-for="(item, index) in submenus.filter(v => !v.hidden)"
          :key="index"
          @click="handleSubmenuSelect(item)"
        >{{ item.meta && item.meta.title || '' }}</li>
      </ul>
    </div>
    <div class="q-devops-container" :class="{'single-menu': !submenus.length}">
      <router-view />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {
    NavLeft: () => import('./left'),
    NavRight: () => import('./right')
  },
  data() {
    return {
      activeMenuIndex: '/',
      activeSubmenuIndex: '/',
      submenus: []
    }
  },
  computed: {
    ...mapGetters(['permission_routes', 'repos']),
    menus() {
      return this.permission_routes.filter(v => !v.hidden)
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        this.activeMenuIndex = to.matched[0].path || '/'
        this.submenus = this.menus.find(v => v.path === this.activeMenuIndex) && this.menus.find(v => v.path === this.activeMenuIndex).children || []
        this.$nextTick(() => {
          this.activeSubmenuIndex = to.matched[1] && to.matched[1].path
        })
      }
    }
  },
  methods: {
    handleMenuSelect(key, keyPath) {
      // console.log('handleMenuSelect', key, keyPath)
      // this.$nextTick(() => {
      //   this.activeMenuIndex = key
      //   this.activeSubmenuIndex = this.submenus && this.submenus[0].path
      // })
    },
    handleSubmenuSelect(routeData) {
      let path = routeData.path
      if (path.includes(':pid')) {
        if (this.repos.length) {
          path = path.replace(':pid', this.repos[0].id)
        } else {
          return this.$message.warning('当前没有仓库')
        }
      }
      this.$router.push({ path })
    }
  }
}
</script>

<style lang="scss" scoped>
.q-devops {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #F0F2F5;
  &-nav {
    width: 100%;
    height: 122px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    & > div {
      position: relative;
      .q-nav-right {
        position: absolute;
        right: 18px;
        top: 0;
        z-index: 1000;
      }
    }
    .q-menu.el-menu {
      width: 100%;
      display: flex;
      justify-content: center;
      z-index: 999;
    }
    .q-submenu.el-menu {
      width: 100%;
      display: flex;
      justify-content: center;
      z-index: 999;
    }
  }
  &-container {
    height: calc(100vh - 162px);
    margin: 142px 20px 20px;
    &.single-menu {
      height: calc(100vh - 102px);
      margin: 82px 20px 20px;
    }
  }
}
</style>